import React, {
	Component
} from 'react'

class Register extends Component {
	constructor(props) {
		super(props)
		this.state = {
			email: "",
			emailVerifyCode: "",
			name: "",
			password: "",
			passwordAgain: "",
			isPwConfirmError: false,
			isEmailInvalid: false,
			isVerifyCodeInvalid: false,
			isNameInvalid: false,
			isPwInvalid: false
		}
	}
	handleInputChange(key, e) {
		// console.log(arguments)
		let state = {}
		state[key] = e.target.value
		this.setState(state)
	}
	handlePwChange(e) {
		this.setState({
			password: e.target.value
		})
	}
	handlePwAgainChange(e) {
		this.setState({
			passwordAgain: e.target.value
		})
	}
	handleFormConfirm(e) {
		e.preventDefault()
		const {
			registerConfirm
		} = this.props
		const {
			email,
			emailVerifyCode,
			name,
			password,
			isEmailInvalid,
			isNameInvalid,
			isVerifyCodeInvalid,
			isPwInvalid
		} = this.state
		console.log(this.state)
		if (email) {
			this.setState({
				isEmailInvalid: false
			})
		} else {
			this.setState({
				isEmailInvalid: true
			})
		}

		if (emailVerifyCode) {
			this.setState({
				isVerifyCodeInvalid: false
			})
		} else {
			this.setState({
				isVerifyCodeInvalid: true
			})
		}

		if (name) {
			this.setState({
				isNameInvalid: false
			})
		} else {
			this.setState({
				isNameInvalid: true
			})
		}

		if (password) {
			this.setState({
				isPwInvalid: false
			})
		} else {
			this.setState({
				isPwInvalid: true
			})
		}


		if (this.state.password == this.state.passwordAgain) {
			this.setState({
				isPwConfirmError: false
			})
			if (email && name && password && emailVerifyCode) {
				registerConfirm(this.state)
			}
		} else {
			this.setState({
				isPwConfirmError: true
			})
		}
	}
	render() {
		const {
			handleVerifyCodeSend
		} = this.props
		return (
			<div className="register-container">
				<div className="register-mark"></div>
				<form className="paper p16 register-item">
					<p className="ta-c mb4 mt0"><strong>Register</strong></p>
					<div className="input">
			            <label htmlFor="" className="fs12 c-grey">Email:</label>
			            <br/>
						<div className="search-box-normalize p-r" style={this.state.isEmailInvalid?{'borderColor':'#e74c3c'}:{'borderColor':'rgba(0, 0, 0, 0.12)'}}>
				            <input onChange={this.handleInputChange.bind(this,'email')} type="email" className="input input-normal w288" placeholder="Input your Email" maxLength="24" required/>
				            <button type="button" className="btn btn-m bg-blue c-text-w search-btn" onClick={handleVerifyCodeSend.bind(this,this.state.email)}>Send</button>
				        </div>		            
				        <br/>
			            <span className="input-ps fs12" style={this.state.isEmailInvalid?{'opacity':'1'}:{'opacity':'0'}}>Email invalid</span>
			        </div>
			        <br/>
					<div className="input pt8">
						<label htmlFor="" className="fs12 c-grey">For verify email:</label>
			            <br/>
			            <input onChange={this.handleInputChange.bind(this,'emailVerifyCode')} type="text" className="input-normal w288"  placeholder="Input verify code" maxLength="32" style={this.state.isVerifyCodeInvalid?{'borderColor':'#e74c3c'}:{'borderColor':'rgba(0, 0, 0, 0.12)'}} required/>
			            <br/>
			            <span className="input-ps fs12" style={this.state.isVerifyCodeInvalid?{'opacity':'1'}:{'opacity':'0'}}>Verify code already send your email</span>
			        </div>
			        <br/>
			        <div className="input pt8">
			            <label htmlFor="" className="fs12 c-grey">Name:</label>
			            <br/>
			            <input onChange={this.handleInputChange.bind(this,'name')} type="text" className="input-normal w288" placeholder="Input your password" maxLength="24" style={this.state.isNameInvalid?{'borderColor':'#e74c3c'}:{'borderColor':'rgba(0, 0, 0, 0.12)'}} required/>
			            <br/>
			            <span className="input-ps fs12" style={this.state.isNameInvalid?{'opacity':'1'}:{'opacity':'0'}}>Name invalid</span>
			        </div>
			        <br/>
			        <div className="input pt8">
			            <label htmlFor="" className="fs12 c-grey">Password:</label>
			            <br/>
			            <input onChange={this.handlePwChange.bind(this)} type="password" className="input-normal w288" placeholder="Input your password" maxLength="24" style={this.state.isPwInvalid?{'borderColor':'#e74c3c'}:{'borderColor':'rgba(0, 0, 0, 0.12)'}} required/>
			            <br/>
			            <span className="input-ps fs12" style={this.state.isPwInvalid?{'opacity':'1'}:{'opacity':'0'}}>Password invalid</span>
			        </div>
			        <br/>
			        <div className="input">
			            <label htmlFor="" className="fs12 c-grey">Password again:</label>
			            <br/>
			            <input onChange={this.handlePwAgainChange.bind(this)} type="password" className="input-normal w288" placeholder="Input your password again" maxLength="15" style={this.state.isPwConfirmError?{'borderColor':'#e74c3c'}:{'borderColor':'rgba(0, 0, 0, 0.12)'}} required/>
			            <br/>
			            <span className="input-ps fs12" style={this.state.isPwConfirmError?{'opacity':'1'}:{'opacity':'0'}}>Place check your password again!</span>
			        </div>
			        <div className="ta-c ptb8">
						<button type="submit" className="btn btn-s btn-tp c-blue" onClick={this.handleFormConfirm.bind(this)}>确认</button>
					</div>
				</form>
			</div>

		)
	}
}

export default Register